import { PageHeader, Menu, Dropdown, Button, Tag, Typography } from 'antd';
import { EllipsisOutlined } from '@ant-design/icons';
import "./index.less"
import {useStores} from '@/stores'
import {observer} from 'mobx-react-lite'

const { Paragraph } = Typography;
const menu = (
  <Menu>
    <Menu.Item>
      <a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">
        1st menu item
      </a>
    </Menu.Item>
    <Menu.Item>
      <a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">
        2nd menu item
      </a>
    </Menu.Item>
    <Menu.Item>
      <a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">
        3rd menu item
      </a>
    </Menu.Item>
  </Menu>
);

const DropdownMenu = () => (
  <Dropdown key="more" overlay={menu}>
    <Button
      style={{
        border: 'none',
        padding: 0,
      }}
    >
      <EllipsisOutlined
        style={{
          fontSize: 20,
          verticalAlign: 'top',
        }}
      />
    </Button>
  </Dropdown>
);




const content = (
  <>
    <Paragraph>

    </Paragraph>
    <Paragraph>

    </Paragraph>
    <div>

    </div>
  </>
);

const Dashboard = () =>{
  const {userStores} = useStores()
  return (
    <div className="workplace">
    <PageHeader
      title={userStores.info.user_name}
      className="site-page-header"
      subTitle={`你好！${userStores.info.user_name}`}
      tags={<Tag color="blue">Running</Tag>}
      extra={[
        <Button key="3">Operation</Button>,
        <Button key="2">Operation</Button>,
        <Button key="1" type="primary">
          Primary
        </Button>,
        <DropdownMenu key="more" />,
      ]}
      avatar={{ src: 'https://avatars1.githubusercontent.com/u/8186664?s=460&v=4' }}
    >

        {content}

    </PageHeader>
    </div>
  )
}
export default observer(Dashboard)
